<template>
    <div>
        <!-- 专题精选轮播图组件 -->
        <van-swipe class="my-swipe" :loop="false" :width="320" indicator-color="white" height="300">
            <van-swipe-item v-for="item in topicListArr" :key="item.id" class="swipe-item">
                <img :src="item.item_pic_url" alt="">
                <h2>{{ item.title }}<span>{{ item.price_info }}</span></h2>
                <p>{{ item.subtitle }}</p>
            </van-swipe-item>

        </van-swipe>
    </div>
</template>

<script>

export default {
    name: '',
    data() {
        return {

        };
    },
    props: ['topicListArr']


}

</script>
<style scoped lang="less">
.my-swipe {
    .swipe-item {
        // margin: 0px 5px 0px 5px;
        width: 300px;

        img {
            width: 300px;
            height: 200px;
            margin: 0px 0px 0px 10px;
        }
        h2{
            width: 270px;
            height: 40px;
            line-height: 40px;
            font-weight: normal;
            font-size: 16px;
            margin-left: 10px;
        
        }
        p{
            font-size: 16px;
            width: 270px;
            height: 24px;
            line-height: 24px;
            margin-left: 10px;
        }
    }
}
</style>